<template>
	<view class="wrap">
		<view class="main" v-if="userInfo">
			<view class="user-view">
				<view class="b-avatar">
					<image :src="userInfo.avatar_url || '/static/imgs/user.png'" mode="aspectFill">
					</image>
				</view>
				<view class="b-info">
					<!-- #ifdef  MP-WEIXIN -->
					<button class="s-edit iconfont icon-edit open-data-btn" open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar"></button>
					<!-- #endif -->
					<!-- #ifdef  H5 -->
					<view class="s-edit iconfont icon-edit" @click="onUploadAvatar"></view>
					<!-- #endif -->
				</view>
			</view>
			<view class="user-info">
				<view class="b-item" v-if="disableOptions.indexOf('user_name') === -1">
					<text class="s-tit">姓名</text>
					<text class="s-tip">{{ userInfo.name }}</text>
				</view>
				<view class="b-item" v-if="disableOptions.indexOf('user_number') === -1">
					<text class="s-tit">编号</text>
					<text class="s-tip">{{ userInfo.number }}</text>
				</view>
				<view class="b-item" v-if="disableOptions.indexOf('user_phone') === -1">
					<text class="s-tit">手机号</text>
					<text class="s-tip">{{ userInfo.phone }}</text>
				</view>
				<view class="b-item" v-if="disableOptions.indexOf('user_group') === -1">
					<text class="s-tit">所在分组</text>
					<text class="s-tip">{{ userInfo.group_name }}</text>
				</view>
				<!-- #ifdef  MP-WEIXIN -->
				<view class="b-item" @click="onChangePhone"
					v-if="disableOptions.indexOf('change_phone') === -1 && (loginMethods.indexOf('phone_captcha') !== -1 || loginMethods.indexOf('wechat_phone') !== -1)">
					<text class="s-tit">修改手机号</text>
					<text class="s-tip"></text>
					<text class="s-more iconfont icon-more"></text>
				</view>
				<!-- #endif -->
				<!-- #ifdef  H5 -->
				<view class="b-item" @click="onChangePhone"
					v-if="disableOptions.indexOf('change_phone') === -1 && loginMethods.indexOf('phone_captcha') !== -1">
					<text class="s-tit">修改手机号</text>
					<text class="s-tip"></text>
					<text class="s-more iconfont icon-more"></text>
				</view>
				<!-- #endif -->
				<view class="b-item" @click="onChangeCode"
					v-if="disableOptions.indexOf('change_code') === -1 && (loginMethods.indexOf('name_code') !== -1 || loginMethods.indexOf('number_code') !== -1)">
					<text class="s-tit">修改登录码</text>
					<text class="s-tip"></text>
					<text class="s-more iconfont icon-more"></text>
				</view>
				<view class="b-item" @click="onFeedback" v-if="disableOptions.indexOf('feedback') === -1">
					<text class="s-tit">意见反馈</text>
					<text class="s-tip"></text>
					<text class="s-more iconfont icon-more"></text>
				</view>
			</view>
			<view class="btn-logout" @click="onLogout" v-if="disableOptions.indexOf('logout') === -1">退出登录</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		updateUserInfo,
		logout
	} from '@/service/api/user.js'
	import {
		uploadImage
	} from '@/service/api/common.js'
	import {
		compressImage
	} from '@/common/util.js'
	import mixinsCommon from '@/mixins/common.js'
	import mixinsAuth from '@/mixins/auth.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {
			getUserInfo().then(([err, res]) => {
				console.log('getUserInfo', err, res)
				if (!err) {
					this.userInfo = res
				}
			})
		},
		computed: {
			disableOptions() {
				return this.$store.getters.globalConfig.disable_options || []
			},
			loginMethods() {
				return this.$store.getters.globalConfig.login_methods || []
			},
		},
		methods: {
			onChangePhone() {
				uni.navigateTo({
					url: '/pages/user/change_phone'
				})
			},
			onChangeCode() {
				uni.navigateTo({
					url: '/pages/user/change_code'
				})
			},
			onFeedback() {
				uni.navigateTo({
					url: '/pages/user/feedback'
				})
			},
			onLogout() {
				logout().then(([err, res]) => {
					console.log('logout', err, res)
					this.$store.commit('delAccessToken');
					uni.reLaunch({
						url: '/pages/user/login?once=1'
					})
				})
			},
			onChooseAvatar(e) {
				console.log('onChooseAvatar', e)
				let imageUrl = e.detail.avatarUrl
				uploadImage(imageUrl).then(([err, res]) => {
					console.log('uploadImage', err, res)
					if (!err) {
						updateUserInfo(res.path).then(([err, res]) => {
							console.log('updateUserInfo', err, res)
							if (!err) {
								this.userInfo.avatar_url = imageUrl
								this.$logic.showToast('修改成功')
							}
						})
					}
				})
			},
			onUploadAvatar(e) {
				console.log('onUploadAvatar', e)
				uni.chooseImage({
					count: 1, // 1张
					sizeType: ['compressed'], // 压缩图
				}).then(([err, res]) => {
					console.log('chooseImage', err, res)
					if (!err) {
						compressImage(res.tempFiles[0], 500, 500).then(([err, res]) => {
							console.log('compressImage', err, res)
							if (!err) {
								let imageUrl = res
								uploadImage(imageUrl).then(([err, res]) => {
									console.log('uploadImage', err, res)
									if (!err) {
										updateUserInfo(res.path).then(([err, res]) => {
											console.log('updateUserInfo', err, res)
											if (!err) {
												this.userInfo.avatar_url = imageUrl
												this.$logic.showToast('修改成功')
											}
										})
									}
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding: 0 40upx 50upx 40upx;
	}

	.user-view {
		margin-top: 50upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		z-index: 1;

		.b-avatar {
			width: 180upx;
			height: 180upx;

			image {
				width: 180upx;
				height: 180upx;
				border: 5upx solid #fff;
				border-radius: 50%;
			}
		}

		.b-info {
			margin-top: 10upx;

			.s-nickname {
				font-weight: bold;
			}

			.s-edit {
				margin-top: 20upx;
				font-size: 32upx;
				color: #bbb;
			}
		}
	}

	.user-info {
		margin-top: 50upx;
		background: #fff;
		border-radius: 20upx;

		.b-item {
			padding: 0 40upx;
			border-bottom: 1upx solid $pq-bg-color;
			height: 100upx;
			display: flex;
			align-items: center;
			position: relative;
			font-size: 26upx;

			.s-tit {
				color: #000;
			}

			.s-tip {
				flex: 1;
				color: #808080;
				text-align: right;
			}

			.s-more {
				margin-left: 10upx;
				color: #808080;
			}
		}
	}

	.btn-logout {
		margin-top: 60upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #DA5650;
		background: #ffffff;
		font-size: 32upx;
		border: 1px solid #DA5650;
		border-radius: 40upx;
		letter-spacing: 10upx;
	}
</style>
